<template>
  <div id="home">
    <!-- 导入头部导航条组件 -->
    <nav-bar class="home-nav">
      <template v-slot:center>
        <p>购物街</p>
      </template>
    </nav-bar>
    <!-- 引入elementUI轮播图组件 -->
    <div id="swipper"><swipper :banners="banners"></swipper></div>
    <!-- 引入recommend组件 -->
    <recommends-view :recommends="recommends"></recommends-view>
    <!-- 引入feature组件 -->
    <feature-view></feature-view>
    <!-- 引入tabControl组件 -->
    <!-- 接收子组件发射的tabClick函数，并且用itemClick接收 -->
    <tab-control
      class="tab-control"
      :titles="['流行', '新款', '精选']"
      @tabClick="itemClick"
    ></tab-control>
    <!-- 引入商品列表组件,传入当前点击的商品类型名,展示对应类型的所有商品列表 -->
    <goods-list :goodsList="goods[currentType].list"></goods-list>
    <!-- 回到顶部组件,父组件传入按钮显示标志给子组件 -->
    <back-top :btnFlag="backFlag"></back-top>
  </div>
</template>
<script>
import { getHomeMultidata, getHomeGoods } from "@network/home"; // 首页网络请求

const Swipper = () => import("./childComps/Swipper.vue"); // 导入轮播图
const RecommendsView = () => import("./childComps/RecommendsView.vue"); // 导入介绍组件
const FeatureView = () => import("./childComps/FeatureView.vue"); //导入feature组件

const NavBar = () => import("@components/common/navbar/NavBar"); // 导入顶部导航条组件
const TabControl = () =>
  import("@components/content/tabControl/TabControl.vue"); //导入tabControl组件
const GoodsList = () => import("@components/content/goods/GoodsList.vue"); //导入商品列表组件

const BackTop = () => import("@components/common/backtop/BackTop.vue"); //回到顶部组件
export default {
  name: "home",
  components: {
    NavBar,
    Swipper,
    RecommendsView,
    FeatureView,
    TabControl,
    GoodsList,
    BackTop,
  },
  data() {
    return {
      // 存网络请求过来的数据
      banners: [],
      recommends: [],
      /* 请求的商品数据 page用于记录数据的页码，用于上拉加载更多*/
      goods: {
        pop: { page: 0, list: [] }, //流行
        new: { page: 0, list: [] }, //新款
        sell: { page: 0, list: [] }, //精选
      },
      /* 当前请求商品的类型 ,默认是pop即流行 */
      currentType: "pop",
      firstScrollTop: 0,
      lastScrollTop: 0,
      /* 回到顶部按钮是否显示 */
      backFlag: false,
    };
  },
  /* 创建create生命周期函数，当组件被创建的时候发送网络请求,创建的时候已经可以获得data数据了，但是没有完成渲染 */
  created() {
    /* 
    网络请求相关方法
    */
    /* 请求多个数据 */
    this.getHomeMultidata();
    /* 请求goods数据 ,默认创建的时候请求第一页数据*/
    this.getHomeGoods("new");
    this.getHomeGoods("pop");
    this.getHomeGoods("sell");
  },
  methods: {
    /* 请求多个数据 */
    getHomeMultidata() {
      getHomeMultidata().then(
        (response) => {
          console.log("multadata接口的数据", response);
          this.banners = response.data.banner.list;
          this.recommends = response.data.recommend.list;
        },
        (reason) => {
          console.log(reason);
        }
      );
    },
    /* 请求商品数据 传入page和type */
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((response) => {
        console.log("data接口的数据", response);
        /* 将请求过来的商品数据保存到goods变量中，并且请求一次商品页码加1 */
        //push接收可变参数，...数组的解构语法，表示将数组元素一个个提取出来
        this.goods[type].list.push(...response.data.list);
        this.goods[type].page += 1;
      });
    },
    /* 
    自定义事件方法
    */
    /* 绑定子组件tabcontrol发射过来的点击事件tabClick，接收传过来的index，
       根据index结果改变currentType值来进行点击哪一个就显示哪一个商品类型 */
    itemClick(index) {
      console.log(index);
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },
    scrollHander() {
      /* 获取当前的滚动条位置 */
      this.lastScrollTop = window.scrollY;
      // console.log(window.scrollY);
      if (window.scrollY > 200) {
        this.backFlag = true;
      } else {
        this.backFlag = false;
      }
    },
  },
  /* 组件挂载的时候，对滚动事件进行监听 */
  mounted() {
    window.addEventListener("scroll", this.scrollHander);
    /* 监听浏览器刷新事件时滚动到顶部 unload表示页面完全卸载 */
    window.addEventListener("unload", (e) => {
      window.scroll(0, 0);
    });
  },
  destroyed() {},
  /* keep-alive钩子函数 */
  /* 路由活跃状态时 */
  activated() {
    // console.log(this.firstScrollTop);
    /* 调用window.scroll方法,因为组件一直挂载着 */
    window.scroll(0, this.firstScrollTop);
  },
  deactivated() {
    // console.log(window.scrollY);
    /* 路由不活跃时，将最后一次滚动位置赋值给活跃是显示的滚动条位置 */
    this.firstScrollTop = this.lastScrollTop;
    // console.log(this.firstScrollTop);
  },
};
</script>

<style>
#home {
  padding-top: 41px;
  padding-bottom: 50px;
}
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  /* 顶部导航固定 */
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 3;
}
/* tab-control粘性附着 */
.tab-control {
  /* css粘性附着！！！当滚动条到达这个标签之后，会将该标签fixed */
  position: sticky;
  /* 粘性附着必须设置一个top属性 挺溜的位置*/
  top: 43px;
  /* 让元素不会被商品列表覆盖 */
  z-index: 2;
}
#swipper {
  position: relative;
  top: 0;
}
#hidden {
  height: 1000px;
  overflow: hidden;
}
</style>